import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { FilterItem } from '../../components';
import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch } from 'antd';
import city from '../../configs/city';

const Search = Input.Search;
const { RangePicker } = DatePicker;

const ColProps = {
	xs: 24,
	sm: 12,
	style: {
		marginBottom: 16,
	},
};

const TwoColProps = {
	...ColProps,
	xl: 96,
};

const Filter = ({
  onAdd,
	isMotion,
	switchIsMotion,
	onFilterChange,
	filter,
	form: {
    getFieldDecorator,
		getFieldsValue,
		setFieldsValue,
  },
}) => {
	const handleSubmit = () => {
		const fields = getFieldsValue();
		onFilterChange(fields);
	};

	const handleChange = (key, values) => {
		const fields = getFieldsValue();
		fields[key] = values;
		setFieldsValue(fields);
	};

	const handleReset = () => {
		setFieldsValue({ config_key: '', createTime: [] });
		handleSubmit();
	};


	const { config_key } = filter;

	const initialCtime = [];
	if (filter.createTime && filter.createTime[0]) {
		initialCtime[0] = moment(filter.createTime[0]);
	}
	if (filter.createTime && filter.createTime[1]) {
		initialCtime[1] = moment(filter.createTime[1]);
	}

	return (
		<Row gutter={24}>
			<Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
				{getFieldDecorator('config_key', { initialValue: config_key })(<Search placeholder="搜索配置Key" onSearch={handleSubmit} />)}
			</Col>
			<Col {...ColProps} xl={{ span: 6 }} md={{ span: 8 }} sm={{ span: 12 }}>
				<FilterItem label="添加时间">
					{getFieldDecorator('createTime', { initialValue: initialCtime })(
						<RangePicker style={{ width: '100%' }} onChange={handleChange.bind(null, 'createTime')} />
					)}
				</FilterItem>
			</Col>
			<Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
				<div style={{ display: 'flex', justifyContent: 'space-between' }}>
					<div >
						<Button type="primary" onClick={handleSubmit} icon="search" className="search margin-right">搜索</Button>
						<Button onClick={handleReset} icon="sync">重置</Button>
					</div>
					<div>
						<Button type="ghost" onClick={onAdd} icon="plus" className="opt-but">添加</Button>
					</div>
				</div>
			</Col>
		</Row>
	);
};

Filter.propTypes = {
	onAdd: PropTypes.func,
	isMotion: PropTypes.bool,
	switchIsMotion: PropTypes.func,
	form: PropTypes.object,
	filter: PropTypes.object,
	onFilterChange: PropTypes.func,
};

export default Form.create()(Filter);
